<template>
	<view class="container">
		<view class="user-info">
			<view class="avatar">
				<image src="/static/images/avatar.png" mode="aspectFill"></image>
			</view>
			<view class="user-details">
				<text class="user-name">用户名</text>
				<text class="user-level">训练等级: 初级</text>
			</view>
		</view>
		
		<view class="user-stats">
			<view class="stat-item">
				<text class="stat-value">12</text>
				<text class="stat-label">训练天数</text>
			</view>
			<view class="stat-divider"></view>
			<view class="stat-item">
				<text class="stat-value">120</text>
				<text class="stat-label">收缩次数</text>
			</view>
			<view class="stat-divider"></view>
			<view class="stat-item">
				<text class="stat-value">85</text>
				<text class="stat-label">训练分钟</text>
			</view>
		</view>
		
		<view class="settings-list">
			<view class="settings-item" @tap="showToast('设置')">
				<view class="settings-icon gold">⚙️</view>
				<text class="settings-label">设置</text>
				<text class="settings-arrow">></text>
			</view>
			<view class="settings-item" @tap="showToast('关于我们')">
				<view class="settings-icon gold">ℹ️</view>
				<text class="settings-label">关于我们</text>
				<text class="settings-arrow">></text>
			</view>
			<view class="settings-item" @tap="showToast('帮助中心')">
				<view class="settings-icon gold">❓</view>
				<text class="settings-label">帮助中心</text>
				<text class="settings-arrow">></text>
			</view>
			<view class="settings-item" @tap="showToast('意见反馈')">
				<view class="settings-icon gold">📝</view>
				<text class="settings-label">意见反馈</text>
				<text class="settings-arrow">></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			showToast(message) {
				uni.showToast({
					title: message + '功能开发中',
					icon: 'none'
				});
			}
		}
	}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding: 15px;
}

/* 我的页面样式 */
.user-info {
	background: #fff;
	border-radius: 10px;
	padding: 20px;
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	
	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 30px;
		overflow: hidden;
		margin-right: 15px;
		border: 2px solid #FFD700;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.user-details {
		.user-name {
			font-size: 18px;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 5px;
		}
		
		.user-level {
			font-size: 14px;
			color: #666;
			background: linear-gradient(90deg, #FFD700, #FFA500);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-weight: 500;
		}
	}
}

.user-stats {
	background: #fff;
	border-radius: 10px;
	padding: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	
	.stat-item {
		flex: 1;
		text-align: center;
		
		.stat-value {
			font-size: 18px;
			font-weight: bold;
			color: #FFD700;
			display: block;
			margin-bottom: 5px;
		}
		
		.stat-label {
			font-size: 12px;
			color: #666;
		}
	}
	
	.stat-divider {
		width: 1px;
		height: 30px;
		background: #eee;
	}
}

.settings-list {
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	
	.settings-item {
		padding: 15px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
		
		&:last-child {
			border-bottom: none;
		}
		
		.settings-icon {
			width: 24px;
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 10px;
			font-size: 18px;
			
			&.gold {
				color: #FFD700;
			}
		}
		
		.settings-label {
			font-size: 14px;
			color: #333;
			flex: 1;
		}
		
		.settings-arrow {
			font-size: 14px;
			color: #ccc;
		}
	}
}
</style> 